<template>
  <view
    class="evaluate"
    :style="
      value == true
        ? 'display:flex;' + 'padding-bottom:' + Number(height) + 'rpx'
        : 'display:none;'
    "
  >
    <view @click="off">
      <input type="text" placeholder="说点什么吧。。。" :disabled="true" />
    </view>
    <view @click="likeArtice">
      <image :src="like[likeIndex]" mode="widthFix" />
      <text>{{ evaluateState.favorite.favoriteNumber }}</text>
    </view>
    <view @click="opencomment">
      <image src="../static/img/pinglunk.png" mode="widthFix" />
      <text>{{ evaluateState.commentNum }}</text>
    </view>
    <view class="share">
      <image src="../static/img/zhaunfa.png" class="zf" mode="WidthFix" />
      <button open-type="share"></button>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    value: {
      type: Boolean,
      default: () => true,
    },
    height: {
      type: Number,
      default: 0,
    },
    likeIndex: {
      type: Number,
      default: () => null,
    },
    evaluateState: {
      type: Object,
      default: () => {
        return {
          commentNum: 0, //评论的数量
          favorite: {
            sFavorite: 0, //是否已经收藏
            favoriteNumber: 0, //收藏的数量
          },
        };
      },
    },
  },
  data() {
    return {
      like: {
        0: require("../static/img/aixin_k.png"),
        1: require("../static/img/dzaixin.png"),
      },
      safeArea: "", //安全区域高度
    };
  },
  methods: {
    off() {
      this.$emit("input", false);
    },
    likeArtice() {
      let index = null;
      this.likeIndex == 1 ? (index = 0) : (index = 1);
      console.log("like", this.likeIndex);

      this.$emit("likeArtice", index);
    },
    opencomment() {
      this.$emit("openCommlist");
    },
  },
  watch:{
    evaluateState:function(newvalue){
      console.log(newvalue,'来自底部评论数量组件')
    }
  }
};
</script>

<style scoped lang="scss">
.zf {
  width: 40rpx;
  height: 40rpx;
}
.evaluate {
  width: 750rpx;
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18rpx 38rpx;
  z-index: 100;
  > view {
    font-size: 40rpx;
    display: flex;
    align-items: center;
    > image {
      width: 40rpx;
      &:first-child {
        margin-right: 15rpx;
        height: 35rpx;
      }
    }
    > text {
      &:last-child {
        font-size: 20rpx;
        font-weight: 500;
        color: rgba(36, 36, 36, 1);
      }
    }
    &:first-child {
      width: 354rpx;
      height: 62rpx;
      background: rgba(238, 238, 238, 1);
      border-radius: 31rpx;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding-left: 29rpx;
      > input {
        width: 100%;
        font-size: 26rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(117, 117, 117, 1);
      }
    }
  }
}
.share {
  position: relative;
  > button {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
  }
}
</style>
